<template>
    <BPTable ref='tableRef' align='center' row-key='id' :columns='columns' :api='page' :rowSelection="false">
        <template #bank="{ record }">
            <div>银行：{{ record.bank }}</div>
            <div>收款人：{{ record.payee }}</div>
            <div>账号：{{ record.account }}</div>
        </template>

        <template #status="{record}">
            <template v-if="record.status == 0">{{ WITHDRAWAL_STATUS[record.status] }}</template>
            <template v-else-if="record.status == 1"><a-tag color="success">{{ WITHDRAWAL_STATUS[record.status] }}</a-tag></template>
            <template v-else-if="record.status == 2"><a-tag color="error">{{ WITHDRAWAL_STATUS[record.status] }}</a-tag></template>
            <template v-else-if="record.status == 3"><a-tag>{{ WITHDRAWAL_STATUS[record.status] }}</a-tag></template>
        </template>

        <template #$action="{record}">
            <template v-if="record.status == 0">
                <BTextButton type="primary" @click="passSubmit(record.id)">通过</BTextButton>
                <BTextButton @click="refuse(record.id)">驳回</BTextButton>
            </template>
        </template>
    </BPTable>

    <BDialog v-model:visible='refuseVisible' title="驳回提现" width='500px' :confirm='refuseSubmit'>
        <a-textarea placeholder="驳回原因" v-model:value="refuseReason" />
    </BDialog>
</template>

<script lang="ts" setup>
import { pageApi, passWithdrawalApi, refuseWithdrawalApi } from '@/api/finance/Withdrawal';
import { WITHDRAWAL_STATUS } from '@/constant';
import { parseTime } from '@/utils';
    import { Modal, message } from 'ant-design-vue';
import dayjs from 'dayjs';
    import { ref } from 'vue';


    const tableRef = ref()
    function page(data){
        const {createTime, ...params} = data
        if(createTime) {
            params.startTime = dayjs(createTime[0]).unix()
            params.endTime = dayjs(createTime[1]).unix()
        }
        return pageApi(params)
    }

    const refuseVisible = ref(false)
    const refuseReason = ref<string>('')
    const currentId = ref(0)
    function refuse(id) {
        currentId.value = id
        refuseReason.value = ''
        refuseVisible.value = true
    }
    async function refuseSubmit() {
        const r = await refuseWithdrawalApi(currentId.value, refuseReason.value)
        if(r.success) {
            tableRef.value.reload()
            message.success('驳回成功')
            refuseVisible.value = false
        }else {
            message.error(r.msg)
        }
    }

    async function passSubmit(id) {
        Modal.confirm({
            title : '确定通过吗',
            async onOk() {
                const r = await passWithdrawalApi(id)
                if(r.success) {
                    tableRef.value.reload()
                    message.success('通过成功')
                }else {
                    message.error(r.msg)
                }
            }
        })
    }

    const columns = ref<Column[]>([
        {
            title : '金额(元)',
            dataIndex : 'amount',
            align : 'center',
        },

        {
            title : '商户',
            dataIndex : 'merchant',
            align : 'center',
        },

        {
            title : '收款信息',
            dataIndex : 'bank',
            align : 'center',
        },

        {
            title : '状态',
            dataIndex : 'status',
            align : 'center',
            inSearch : true,
            type : 'select',
            options : WITHDRAWAL_STATUS
        },

        {
            title : '原因',
            dataIndex : 'reason',
        },

        {
            title : '审批时间',
            dataIndex : 'completeTime',
            align : 'center',
            customRender({text}) {
                return parseTime(text)
            }
        },


        {
            title : '申请时间',
            dataIndex : 'createTime',
            align : 'center',
            inSearch : true,
            type : 'rangePicker',
            customRender({text}) {
                return parseTime(text)
            }
        },

        {
            title : '操作',
            dataIndex : '$action',
            align : 'center'
        }
    ])
</script>